<template>
	<view class="viewbox">
		<view class="signin-box">
			<image class="signin-img" src="../../static/wind/signin-bg.png"></image>
			<view class="mysignin-box">

				<view class="mysignin">
					<view class="title">我的积分</view>
				</view>
				<view class="fs">{{userSignin.userSigninNum + integralNum }}</view>
			</view>
		</view>
		<view class="style-box">
			<view class="signin-header">
				<view class="header-left">签到打卡 拿经验和积分</view>
				<view class="header-right">
					<view class="header-right-title" @click="integralCon()">收支/兑换明细</view>
					<view class="header-right-arrow">></view>
				</view>
			</view>
			<view class="signin-content">
				<block v-for="(item, index) in userSignin.signinVos" :key="index">

					<view class="signin-item" @click="setUserSignin(item)">
						<view :class="'signin-item-header header-bg'+item.signinStatus">
							<image class="signined-bg" src="../../static/wind/signin.png"></image>
							<view class="integral-font">{{item.signinNum}}分</view>
						</view>
						<!-- {{item.signinStatus==1?"已签到":"未签到"}} -->
						<view class="integral-day">{{getSigninStatusText(item.signinStatus)}}</view>
					</view>

				</block>

			</view>
		</view>
		<view class="style-box">
			<view class="header">积分及经验值规则</view>
			<view class="content">1、连续签到7天，每天加一分；7天后，每天签到7分； </view>
			<view class="content">2、参与评论，最多给+5分 </view>
			<view class="content">3、消缺处理提问，最多给+10；</view>
			<view class="content">4、发布帖子，最多给+10；</view>
			<view class="content">5、发布有意义的评论，最多+5；</view>
		</view>
		<view class="style-box">
			<view class="header">评论规则</view>
			<view class="content">总的来说，希望您发布的评论是有意义的、对他人有帮助的内容。无意义的、违反您所在国家法律法规的，引起他人普遍反感的评论是禁止发布的。
				发布评论可以获取积分和经验值。好的评论可以获得他人点赞，从而让您获取更多的积分和经验值。</view>
		</view>
		<view class="style-box">
			<view class="header">具体的评论规则如下</view>
			<view class="content">发布评论时，请遵守您所在国家和中华人民共和国的法律法规，禁止发布政治相关内容； 评论内容应该和所在页面的内容相关，禁止一切无意义和严重跑题的内容；
				请尊重他人，友好评论，请像和他人面对面谈话时一样保持对他人的尊重； 禁止发布商业广告； 请勿使用类似“谢谢谢谢谢谢谢谢谢”、“哈哈哈哈哈哈哈哈”这样的术语。表达感谢请真诚，此种方式视为灌水。
				评论发布后，是有人工审核的。不合规范的评论，会被删除并扣除积分及经验值。大量发布违规评论者会被封禁账号及IP。 发布不友好评论引起他人特别是创作者、上传人严重反感的，直接删除账号。</view>
		
		</view>
		<!-- <view class="style-box">
			<view class="header">如下操作会被扣除相应积分及经验值</view>
			<view class="content">连续签到7天，每天加一分；7天后，每天签到7分；</view>
			<view class="content">1、评论内容被删除（评论规则），-3分；</view>
			<view class="content">2、评论的点赞被取消；-1分； -1</view>
			<view class="content">3、技术分享被删除；-5分；</view>
			<view class="content">4、问题被投反对票；-2分</view>
		</view>
		 -->
		<uni-popup ref="popup" type="bottom">
			<view class="signin-tip-box">
				<view class="tip-box">
					<image class="img" src="../../static/wind/signin.png"></image>
					<view class="txt">签到成功,恭喜您获得</view>
					<view class="txt">{{signinNum}}积分!</view>
				</view>
				<view class="tip-close" @click="closePopup()">
					<image style="width: 60rpx;height: 60rpx;" src="../../static/images/close.png"></image>
				</view>
			</view>
		</uni-popup>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				userSignin: {
					userSigninNum: 0
				},
				url: "",
				signinNum:0,
				integralNum:0,
			};
		},

		onLoad(option) {
			// var login=this.checkLogin();
			// if(!login)
			// {
			// 	return false;
			// }
			this.getUserSignin();
			// 获取发帖积分值
			this.getuserIntegrals();
		},
		methods: {
			// 获取发帖积分值
			getuserIntegrals(){
				let params = {
					userId: this.$store.state.userinfo.id
				}
				var that = this;
				this.$u.api.getuserIntegrals(params)
					.then(res => {
						console.log(res.data);
						this.integralNum = res.data.integral 
					});
			},
			
			//item.signinStatus
			getSigninStatusText(status)
			{
				if(status==1)
				{
					return "已签到";
				}else if(status==2)
				{
					return "已过期";
				}else if(status==3)
				{
					return "可签到";
				}else
				{
					
				}
			},
			gotoSearch(index) {

			},
			showPopup() {
				this.$refs.popup.open('center')
				console.log("测试");
			},
			closePopup() {
				this.$refs.popup.close()
			},
			getUserSignin() {
				let params = {
					userId: this.$store.state.userinfo.id
				}
				var that = this;
				this.$u.api.getUserSignin(params)
					.then(res => {
						that.userSignin = res.data;
					});
			},
			setUserSignin(item) {
				
				if (item.signinStatus != 3) {
					return;
				}
				this.signinNum=item.signinNum;
				let params = {
					userId: this.$store.state.userinfo.id,
					signinNum: item.signinNum,
					signinTime: item.signinTime
				}
				var that = this;
				this.$u.api.userSignin(params)
					.then(res => {
						this.showPopup();
						that.getUserSignin();
					});
			},

			integralCon() {
				uni.navigateTo({
					url: '/pages/user_integral_con/user_integral_con'
				})
			},
		}
	}
</script>

<style lang="scss">
	.viewbox {
		display: flex;
		flex-direction: column;
	}

	.signin-tip-box {
		display: flex;
		flex-direction: column;
		text-align: center;

		.tip-box {
			width: 300rpx;
			height: 300rpx;
			border-radius: 20rpx;
			background-color: white;
			background: linear-gradient(180deg, #FFBF74, #FF8022);

			.img {
				width: 120rpx;
				height: 120rpx;
			}

			.txt {
				font-size: 28rpx;
				font-family: PingFang SC;
				font-weight: 500;
				color: #FFFFFF;
			}
		}

		.tip-close {
			margin-top: 20rpx;
		}

		.tip-bg {
			background: linear-gradient(180deg, #FFBF74, #FF8022);
			border-radius: 4px;
		}
	}


	.signin-box {
		width: 100%;
		margin-bottom: -60px;

		.signin-img {
			width: 100%;
		}

		.mysignin-box {
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			position: absolute;
			left: calc(100vw/2 - 70rpx);
			top: 50rpx;
			z-index: 30;

			.mysignin {
				width: 140rpx;
				background: #E7BA79;
				border-radius: 22px;
				padding-top: 5rpx;
				padding-bottom: 5rpx;
				padding-left: 10rpx;
				padding-right: 10rpx;
			}

			.title {
				font-size: 28rpx;
				font-family: PingFang SC;
				color: #FFFFFF;

			}

			.fs {

				font-size: 60rpx;
				font-family: PingFang SC;

				color: #333333;


			}
		}
	}

	.signin-header {
		display: flex;
		justify-content: flex-end;
		text-align: center;
		line-height: 40px;

		.header-left {
			font-size: 34rpx;
			font-family: PingFang SC;
			color: #333333;
			margin-left: 20rpx;
		}

		.header-right {
			display: flex;
			flex-direction: row;
			margin-left: auto;
			margin-right: 20rpx;
		}

		.header-right-title {
			font-size: 26rpx;
			font-family: PingFang SC;
			color: #808080;
		}

		.header-right-arrow {
			color: #FF8022;
			margin-left: 5rpx;
		}
	}

	.signin-content {
		display: flex;
		flex-direction: row;
		text-align: center;
	}

	.signin-item {
		display: flex;
		flex-direction: column;
		flex-grow: 1;
		margin: 5rpx;
		align-items: center; //适合单行显示的组件，垂直居中
		justify-content: center; //水平居中
	}

	.signin-item-header {
		display: flex;
		flex-direction: column;
		width: 80rpx;
		height: 100rpx;
		align-items: center; //适合单行显示的组件，垂直居中
		justify-content: center; //水平居中

		.signined-bg {
			width: 32px;
			height: 32px;
		}
	}

	.header-bg1 {
		background: linear-gradient(180deg, #FFBF74, #FF8022);
		border-radius: 4px;
	}

	.header-bg2 {
		background: linear-gradient(0deg, #EBCC98, #FFE9C3);
		border-radius: 4px;
	}

	.header-bg3 {
		background: linear-gradient(180deg, #FFBF74, #FF8022);
		border-radius: 4px;
	}

	.integral-font {
		font-size: 22rpx;
		font-family: PingFang SC;
		color: #FFFFFF;
	}

	.integral-day {
		font-size: 22rpx;
		font-family: PingFang SC;
		color: #999999;
	}


	.style-box {
		margin-left: 20px;
		margin-right: 20px;
		margin-top: 20px;
		background: #FFFFFF;
		box-shadow: 0px 1px 20px 0px rgba(255, 139, 48, 0.2);
		border-radius: 10px;
		padding-bottom: 20px;
		z-index: 20;
	}

	.header {
		margin-left: 20rpx;
		margin-top: 20rpx;
		font-size: 34rpx;
		font-family: PingFang SC;
		color: #333333;
	}

	.content {
		margin-left: 20rpx;
		font-size: 26rpx;
		font-family: PingFang SC;
		color: #808080;

	}
</style>
